<template>
	<view class="play-back-page">
		<view class="select-area-sty">
			<!-- 			<view style="flex:1;text-align: center;">
				级别
				<uni-data-select v-model="lv" :localdata="level" @change="changeLevel"></uni-data-select>
			</view> -->
			<view style="flex:1;text-align: left;">
				<uni-datetime-picker type="datetime" return-type="string" placeholder="日期" v-model="fbTime"
					@change="changeLog" />
			</view>
		</view>
		<view style="padding: 32rpx;">
			<view style="font-size: 32rpx;font-weight: 600;margin-bottom: 15px;">相关推荐</view>
			<view v-for="item in newsList" :key="item._id" class="news-area" @click="toNewsDetail(item)">
				<view style="width: 100%;"><img style="width: 100%;height: 195px;" :src="item.imgUrl" alt=""></view>
				<view>
					<view class="text-title" style="font-size: 32rpx;">{{item.title}}</view>
					<view style="font-size: 28rpx;text-align: right;">
						<img style="width: 20px;height: 20px;vertical-align: middle;"
							src="../../../static/icon-time.png" alt="">
						<uni-dateformat format="yyyy/MM/dd" :threshold="[0, 0]" :date="item.hostTime"></uni-dateformat>
						<!-- <text>{{item.created_by}}</text> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDataFn
	} from '@/utils/baseFn.js';
	const db = uniCloud.database();
	const dbCmd = db.command;
	export default {
		data() {
			return {
				newsList: [],
				where: `"deleted_at"==null`,
				tmpWhere: {
					deleted_at: null
				},
				level: [{
						value: '0',
						text: '公开组'
					},
					{
						value: '1',
						text: '职工组'
					},
					{
						value: '',
						text: '所以组别'
					}
				],
				lv: '',
				fbTime: '',
				skipNum: 0
			}
		},
		created() {
			this.getNewsList()
		},
		mounted() {},
		methods: {
			getNewsList() {
				getDataFn('playback-MGMT', this.where, this.skipNum, 'title,hostTime,annexId').then(
					res => {
						const arr = []
						res.data.map(item => {
							const file = item.annexId.split(',')
							item.imgUrl = `${this.$baseImgUrl}${file[0]}`
							arr.push(item)
						})
						this.newsList = this.newsList.concat(arr)
						this.skipNum = this.newsList.length
					})
			},
			toNewsDetail(item) {
				uni.navigateTo({
					url: `playBackDetail?id=${item._id}`
				});
			},
			initData() {
				this.newsList = []
				this.skipNum = 0
				this.getNewsList()
			},
			changeLevel(e) {
				let str = {
					...this.tmpWhere
				}
				if (e) {
					str.level = e
				}
				if (this.fbTime) {
					str.hostTime = new RegExp(this.fbTime.substr(0, 10))
				}
				this.where = str
				this.initData()
			},
			changeLog(e) {
				let str = {
					...this.tmpWhere
				}
				if (e) {
					str.hostTime = new RegExp(e.substr(0, 10))
				}
				if (this.lv) {
					str.level = this.lv
				}
				this.where = str
				this.initData()
			}
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			// this.skipNum = this.skipNum + 20
			this.getNewsList()
		}
	}
</script>

<style>
	.play-back-page {
		height: 100vh;
		background-color: #f7f8fc;
	}

	.select-area-sty {
		height: 55px;
		display: flex;
		background-color: #fff;
		line-height: 50px;
	}

	.news-area {
		margin-top: 20rpx;
	}

	.play-back-page .uni-date {
		width: 170px;
		display: inline-block;
	}

	.play-back-page .uni-select,
	.play-back-page .uni-date-x--border {
		border: none;
		border-bottom: none;
	}

	.play-back-page .uni-stat__select {
		width: 120px;
		display: inline-block;
	}

	.text-title {
		font-size: 15px;
		font-family: 600;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
<style lang="scss">
</style>